<template>
  <div>
    <a-button type="primary" @click="buyStuff">测试</a-button>
    <div>
      <PiniaState></PiniaState>
    </div>
  </div>
</template>

<script>
import PiniaState from "./PiniaState.vue";
import { mapStores, defineStore } from "pinia";
// given two stores with the following ids
const useUserStore = defineStore("user", {
  // ...
});
const useCartStore = defineStore("cart", {
  // ...
});

export default {
  components: {
    PiniaState,
  },
  computed: {
    // note we are not passing an array, just one store after the other
    // each store will be accessible as its id + 'Store'
    ...mapStores(useCartStore, useUserStore),
  },
  methods: {
    async buyStuff() {
      // use them anywhere!
      console.log(this.userStore);
    },
  },
};
</script>

<style lang="scss" scoped></style>
